<template>
  <a-drawer
    title="详情信息"
    placement="right"
    :visible="visible"
    :width="800"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <template>
      <table border="1" width="750" align="center">
        <tr align=center>
          <th>姓名</th><td>{{ this.personInfo.personName }}</td>
          <th>曾用名</th><td>{{ this.personInfo.personUsedName }}</td>
          <td rowspan="3">
            <a-card style="width: 100px">
              <img
                slot="cover"
                alt="图像"
                :src="this.personInfo.personImage"
              />
            </a-card>
          </td>
        </tr>
        <tr align="center">
          <th>性别</th><td>{{ this.personInfo.personSex }}</td>
          <th>民族</th><td>{{ this.personInfo.personNation }}</td>
        </tr>
        <tr align="center">
          <th>政治面貌</th><td>{{ this.personInfo.personPoliticsStatus }}</td>
          <th>入党团日期</th><td>{{ this.personInfo.personPartyTime }}</td>
        </tr>
        <tr align="center">
          <th>军衔</th><td>{{ this.personInfo.personMilitaryRank }}</td>
          <th>证件号</th><td colspan="2">{{ this.personInfo.personCard }}</td>
        </tr>
        <tr align="center">
          <th>现军衔时间</th><td>{{ forMateDate(this.personInfo.personMilitaryRankTime) }}</td>
          <th>身份证号</th><td colspan="2">{{ this.personInfo.personIdcard }}</td>
        </tr>
        <tr align="center">
          <th>出生日期</th><td>{{ forMateDate(this.personInfo.personBirthdate) }}</td>
          <th>出生地</th><td colspan="2">{{this.personInfo.personBirthplace}}</td>
        </tr>
        <tr align="center">
          <th>入伍日期</th><td>{{ forMateDate(this.personInfo.personEnlistmentDate) }}</td>
          <th>入伍地</th><td colspan="2">{{this.personInfo.personEnlistmentPlace}}</td>
        </tr>
        <tr align="center">
          <th>任职时间</th><td>{{ forMateDate(this.personInfo.personTenure) }}</td>
          <th>部职别</th><td colspan="2">{{this.personInfo.personJobTitle}}</td>
        </tr>
        <tr align="center">
          <th>籍贯</th><td>{{this.personInfo.personNativePlace}}</td>
          <th>家庭住址</th><td colspan="2">{{this.personInfo.personHomeAddr}}</td>
        </tr>
        <tr align="center">
          <th>邮政编码</th><td>{{this.personInfo.personPostcode}}</td>
          <th>手机号码</th><td colspan="2">{{this.personInfo.personPhone}}</td>
        </tr>
        <tr align="center">
          <th>文化程度</th><td>{{this.personInfo.personEduLevel}}</td>
          <th>家庭电话</th><td colspan="2">{{this.personInfo.personHomePhone}}</td>
        </tr>
        <tr align="center">
          <th>婚恋情况</th><td>{{ this.personInfo.personMarriageStatus }}</td>
          <th>QQ或Email</th><td colspan="2">{{this.personInfo.personQqEmail}}</td>
        </tr>
        <tr align="center">
          <th>职级</th><td>{{ this.personInfo.personRank }}</td>
          <th>现职级时间</th><td colspan="2">{{this.personInfo.personRankTime}}</td>
        </tr>
      </table>
    </template>
  </a-drawer>
</template>

<script>
export default {
  name: 'SoldierInfo',
  data () {
    return {
      visible: false,
      personInfo: {}
    }
  },
  methods: {
    forMateDate (datetime) {
      function addDateZero (num) {
        return (num < 10 ? '0' + num : num)
      }

      const d = new Date(datetime)
      const formatDatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate())
      return formatDatetime
    },
    info (record) {
      this.visible = true
      this.personInfo = record
    },
    onClose () {
      this.visible = false
    }
  }
}
</script>
<style>
input::-webkit-input-placeholder{
  text-align: center;
}
table{
  border: 2px solid rgba(236,236,236,0.84);
}
tr{
  height: 50px;
}
th{
  background: rgba(250,250,250,0.84);
  font-weight: 350;
  color: black;
}
</style>
